import { useRef, useState} from "react";
import {Button, Select, Table} from "antd";
import {AsyncPageSelectSearchParam} from "./AsyncPageSelect";
import { formatMessage } from '@/utils/i18n-transform';
import {ICellInputProps} from "@/biz-components/claim-items/components-v2/cell-input/ICellInputProps";

/**
 * 分页，搜索，多选 选择器
 * */

export interface AsyncPageMultipleSelectExtraProps {
	search: (param: AsyncPageSelectSearchParam) => Promise<{total: number, data: Array<{name: string, value: string}>}>,
}

export function AsyncPageMultipleSelect(props: AsyncPageMultipleSelectExtraProps & ICellInputProps<string[]>) {
	const {value = [],  disabled = false} = props;
	const [options, setOptions] = useState<Array<{name: string, value: string}>>([]);
	const pageSize = 5;
	const [pageNo, setPageNo] = useState(1);
	const [total, setTotal] = useState(0);
	const previousKWRef = useRef<string>('');
	const searchBeforeRef = useRef(false);
	function onFocus() {
		if(!searchBeforeRef.current) {
			onSearch(previousKWRef.current);
		}
		searchBeforeRef.current = true;
	}

	function onSearch(keyword: string) {
		props.search({pageNo: 1, pageSize, keyword}).then((res) => {
			setOptions(res.data);
			setTotal(res.total);
			setPageNo(1);
			previousKWRef.current = keyword;
		})
	}
	/**
	 * 点击搜索按钮
	 * */
	function onClickSearchButton() {
		onSearch(previousKWRef.current);
	}
	/**
	 * 搜索全部数据
	 * */
	function onSearchAll() {
		previousKWRef.current = '';
		props.search({pageNo: 1, pageSize, keyword: ''}).then((res) => {
			setOptions(res.data);
			setTotal(res.total);
			setPageNo(1);
		})
	}
	function onClickSearchAllButton() {
		onSearchAll();
	}
	/**
	 * 点击分页
	 * */
	function onPageChange(current: number) {
		props.search({pageNo: current, pageSize, keyword: previousKWRef.current}).then((res) => {
			setOptions(res.data);
			setTotal(res.total);
			setPageNo(current);
		})
	}
	function onSelect(record: {name: string, value: string}) {
		const exist = value.some((item) => item === record.value);
		if(exist) return;
		props.onChange(value.concat([record.value]));
	}

	return (
		<Select<string[]>
			onFocus={onFocus}
			mode={"multiple"}
			disabled={disabled}
			style={{width: '100%', minWidth: '120px'}}
			value={value}
			onChange={(v) => {
				props.onChange(v);
			}}
			filterOption={false}
			showSearch
			onSearch={(kw) => {
				previousKWRef.current = kw
			}}
			dropdownStyle={{
				minWidth: 300
			}}
			dropdownRender={() => {
				return (
					<div className={"claim-select-dropdown"}>

						<div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-evenly', margin: '10px 0'}}>
							<Button type={"primary"} onClick={onClickSearchButton}>{formatMessage({id: 'others.search'})}</Button>
							<Button type={"primary"} onClick={onClickSearchAllButton}>{formatMessage({id: 'others.searchAll'})}</Button>
						</div>
						<Table<{name: string, value: string}>
							rowKey={"value"}
							size={"small"} dataSource={options} pagination={{
							current: pageNo,
							pageSize: pageSize,
							total: total,
							size: 'small',
							showSizeChanger: false,
							onChange: onPageChange
						}}
							onRow={(record) => {
								return {
									onClick: () => {
										onSelect(record)
									}
								}
							}}
						>
							<Table.Column title={formatMessage({id: 'others.code'})} dataIndex={"value"}/>
							<Table.Column title={formatMessage({id: 'others.name'})} dataIndex={"name"}/>
						</Table>
					</div>
				)
			}}
		>
			{options.map(item => (
				<Select.Option key={item.value} value={item.value}>{item.name}</Select.Option>
			))}
		</Select>

	)
}
// @ts-ignore
AsyncPageMultipleSelect.defaultValue = [];